<template>
    <div>
        <div>
            <el-form :inline="true" :model="visitor" class="demo-form-inline">
                <el-form-item label="访客姓名" prop="visitorName">
                    <el-input
                            v-model="visitor.visitorName"
                            placeholder="请输入访客姓名"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item label="访客手机号" prop="visitorPhoneNumber" label-width="85px">
                    <el-input
                            v-model="visitor.visitorPhoneNumber"
                            placeholder="请输入访客手机号"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item label="到访时间" prop="visitorDate">
                    <el-date-picker clearable size="small" style="width: 200px"
                                    v-model="visitor.visitorDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择到访时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadVisitor">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--按钮-->
        <el-button type="primary" size="mini" icon="el-icon-download" @click="handleExport">导出</el-button>
        <div>
            <el-table
                    :data="visitorList"
            >
                <el-table-column
                        type="selection"
                        width="55"
                />
                <el-table-column
                        label="序号"
                        width="120"
                >
                    <template slot-scope="scope">{{ scope.$index+1 }}</template>
                </el-table-column>
                <el-table-column
                        label="访客姓名"
                        width="120"
                >
                    <template slot-scope="scope">{{ scope.row.visitorName }}</template>
                </el-table-column>
                <el-table-column
                        label="访客手机号"
                        width="120"
                >
                    <template slot-scope="scope">{{ scope.row.visitorPhoneNumber }}</template>
                </el-table-column>
                <el-table-column
                        label="小区名称"
                        width="120"
                >
                    <template slot-scope="scope">{{ scope.row.communityName }}</template>
                </el-table-column>
                <el-table-column
                        label="到访时间"
                        width="120"
                >
                    <template slot-scope="scope">{{ scope.row.visitorDate }}</template>
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        width="200"
                >
                    <template slot-scope="scope">{{ scope.row.createTime }}</template>
                </el-table-column>
                <el-table-column
                        label="备注"
                >
                    <template slot-scope="scope">{{ scope.row.remark }}</template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="120"
                />
            </el-table>
        </div>
        <div class="block">
            <span class="demonstration"/>
            <el-pagination
                    :current-page.sync="current"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="size"
                    layout=" sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Visitor',
        data() {
            return {
                value: '',
                current: 1,
                size: 3,
                total: 0,
                visitorList: [],
                visitor: {
                    visitorId: "",
                    visitorName: "",
                    visitorPhoneNumber: "",
                    communityName: "",
                    visitorDate: "",
                    createTime: "",
                    remark: "",
                    current: 1,
                    size: 2
                },
            }
        }, created() {
            this.loadVisitor(this.current, this.size)
        },
        // 显示
        methods: {
            loadVisitor(current, size, visitor) {
                visitor = this.visitor;
                if (size == null){
                    visitor.size = 3
                }else{
                    visitor.size = size;
                }
                if (current > 1) {
                    visitor.current = current;
                } else {
                    visitor.current = 1;
                }
                console.log(visitor)
                // eslint-disable-next-line no-undef
                this.axios.post('http://localhost:8080/visitor/page', visitor)
                    .then(res => {
                        console.log(res.data)
                        this.visitorList = res.data.data.records
                        this.current = res.data.data.current
                        this.size = res.data.data.size
                        this.total = res.data.data.total
                    })
            },
            handleSizeChange(nowSize) {
                this.size = nowSize
                this.loadVisitor(this.current, this.size)
                console.log(`每页 ${nowSize} 条`)
            },
            handleCurrentChange(nowPage) {
                this.current = nowPage
                this.loadVisitor(this.current, this.size)
                console.log(`当前页: ${nowPage}`)
            },
            loadReset() {
                this.loadVisitor(this.current, this.size)
            },
            handleExport() {
                // eslint-disable-next-line no-undef
                this.axios({
                    method: 'get',
                    url: 'http://localhost:8080/visitor/download',
                    responseType: 'arraybuffer'
                })
                    .then(res => {
                        console.log(res)
                        // 使用Blob对象将后端返回的Arraybuffer格式得数据转成blob类型的数据 window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
                        var b = new Blob([res.data], {type: 'application/vnd.ms-excel'})
                        // 使用URL对象将blob类型的数据生成一个在线下载的链接
                        var url = URL.createObjectURL(b)
                        // 然后我们使用a标签进行下载
                        var link = document.createElement('a')

                        // 设置导出的文件名
                        link.download = Date.now() + '.xlsx'
                        link.href = url
                        // 点击获取文件
                        link.click();

                    })
            }
        }
    }

</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
